CSS 모듈

CSS 모듈은 React에서 스타일을 관리하고 적용하는 강력한 방법입니다. 이 글에서는 CSS 모듈을 사용하여 스타일링하는 방법을 쉽게 따라 할 수 있도록 설명하겠습니다.

CSS 모듈이란?

CSS 모듈은 CSS 파일을 모듈 단위로 분리하여 각각의 컴포넌트에 고유하게 적용할 수 있는 기능입니다. 이를 통해 CSS 클래스 이름이 전역적으로 충돌하는 문제를 방지하고, 코드의 가독성과 유지보수성을 높일 수 있습니다.

CSS 모듈 설정하기

CSS 모듈을 사용하려면 프로젝트 설정이 필요합니다. 대부분의 경우, Create React App(CRA)을 사용하면 자동으로 설정됩니다.

프로젝트를 생성합니다.
```
npx create-react-app my-app
cd my-app
```

CSS 파일을 생성합니다. 파일 이름에 .module.css를 추가하여 CSS 모듈임을 명시합니다.

/* src/App.module.css */
.container {
    background-color: lightblue;
    padding: 20px;
    border-radius: 5px;
}

React 컴포넌트에서 CSS 모듈을 import하고 사용합니다.

// src/App.js
import React from 'react';
import styles from './App.module.css';

function App() {
    return (
        <div className={styles.container}>
            <h1>Hello, CSS Modules!</h1>
        </div>
    );
}

export default App;

위 예제에서 styles 객체는 App.module.css 파일의 각 클래스 이름을 속성으로 가지며, 클래스 이름을 유니크하게 생성하여 적용합니다.

CSS 모듈의 장점

네이밍 충돌 방지: 각 CSS 클래스는 고유한 이름을 가지므로 다른 클래스와 이름이 충돌하지 않습니다.
가독성: 컴포넌트 단위로 스타일을 관리하므로 코드의 가독성이 높아집니다.
유지보수성: 필요 없는 스타일을 쉽게 찾고 제거할 수 있습니다.

구체적인 코드 예시

다양한 CSS 모듈 사용법을 살펴보겠습니다.

조건부 스타일링

React에서 조건부로 CSS 클래스를 적용할 수 있습니다.

import React from 'react';
import styles from './Button.module.css';

function Button({ primary }) {
    return (
        <button className={primary ? styles.primaryButton : styles.secondaryButton}>
            Click Me
        </button>
    );
}

export default Button;

/* src/Button.module.css */
.primaryButton {
    background-color: blue;
    color: white;
}

.secondaryButton {
    background-color: gray;
    color: black;
}

다중 클래스 적용

여러 CSS 클래스를 동시에 적용하는 방법입니다.

import React from 'react';
import styles from './Card.module.css';

function Card() {
    return (
        <div className={`${styles.card} ${styles.shadow}`}>
            <h2>Card Title</h2>
            <p>Card Content</p>
        </div>
    );
}

export default Card;

/* src/Card.module.css */
.card {
    padding: 20px;
    border-radius: 5px;
    background-color: white;
}

.shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

더 알아보기

CSS-in-JS: JavaScript 내에서 CSS를 작성하는 방법입니다.
Styled-Components: 또 다른 스타일링 방법으로, CSS를 React 컴포넌트와 함께 사용합니다.
CSS 모듈의 설정: 다양한 빌드 도구와 프레임워크에서 CSS 모듈을 설정하는 방법.

내용 요약

CSS 모듈은 컴포넌트 단위로 스타일을 관리하여 CSS 클래스 이름 충돌을 방지하고 코드의 가독성과 유지보수성을 높입니다. Create React App을 사용하면 쉽게 설정할 수 있으며, React 컴포넌트에서 조건부 스타일링과 다중 클래스 적용 등 다양한 방법으로 활용할 수 있습니다. CSS 모듈을 사용하면 스타일 관리가 편리해지고, 코드의 재사용성이 높아집니다.

CSS 모듈이란?​

CSS 모듈 설정하기​

CSS 모듈의 장점​

구체적인 코드 예시​

조건부 스타일링​

다중 클래스 적용​

더 알아보기​

내용 요약​